<template>
  <view class="course-container">
    <view class="header">
      <text class="title">课程管理</text>
      <view class="header-buttons">
        <u-button type="primary" @click="C.handleAddCourse" icon="plus">添加课程</u-button>
      </view>
    </view>

    <view class="content">
      <u-search placeholder="搜索课程..." v-model="C.searchKeyword.value" @search="C.handleSearch"></u-search>

      <u-list class="course-list">
        <u-list-item v-for="(course, index) in C.filteredCourses.value" :key="index">
          <view class="course-item">
            <view class="course-logo-container">
              <view class="logo-wrapper">
                <image 
                  v-if="course.logo" 
                  :src="C.formatFileUrl(course.logo)"
                  class="course-logo"
                  mode="aspectFill"
                />
                <view v-else class="logo-placeholder">
                </view>
              </view>
            </view>
            
            <view class="course-info">
              <text class="course-name">{{ course.name }}</text>
              <text class="course-desc">{{ course.desc }}</text>
              <text class="course-creator" v-if="course.creater">创建老师: {{ course.creater.name || course.creater.username }}</text>
            </view>
            
            <view class="actions">
              <u-button 
                size="mini" 
                type="info" 
                plain
                @click="showActionMenu(course)"
                class="more-button"
              >
                <u-icon name="more-dot-fill" size="18" color="#666"></u-icon>
              </u-button>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <!-- 操作菜单 -->
    <u-action-sheet 
      :show="actionMenuVisible" 
      :actions="actionMenuOptions" 
      @close="actionMenuVisible = false"
      @select="handleActionSelect"
    ></u-action-sheet>

    <admin-course-modal />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import "jbecool/jbecool.uniapp.min.js";
import "@/js/common.js";
import C from "@/js/admin/course.js";

// 操作菜单相关
const actionMenuVisible = ref(false);
const actionMenuOptions = ref([
  { name: '课堂管理', value: 'schedule' },
  { name: '讨论管理', value: 'discuss' },
  { name: '作业管理', value: 'assignment' },
  { name: '试题管理', value: 'testbank' },
  { name: '编辑', value: 'edit' },
  { name: '删除', value: 'delete' }
]);
const selectedCourse = ref(null);

// 页面加载时获取数据
onMounted(async () => {
  await C.loadCourses();
});

// 跳转到试题库管理页面
const goToTestBank = (courseId) => {
  if (courseId) {
    uni.navigateTo({
      url: `/pages/course/testitem-management?courseId=${courseId}`
    });
  } else {
    uni.navigateTo({
      url: `/pages/course/testitem-management`
    });
  }
};

const goToAssignment = (courseId) => {
  if (courseId) {
    uni.navigateTo({
      url: `/pages/course/assignment?courseId=${courseId}`
    });
  }
};

const goToDiscuss = (courseId) => {
  if (courseId) {
    uni.navigateTo({
      url: `/pages/course/discuss?courseId=${courseId}`
    });
  }
};

const goToSchedule = (courseId) => {
  if (courseId) {
    uni.navigateTo({
      url: `/pages/course/schedule-management?courseId=${courseId}`
    });
  }
};

// 显示操作菜单
const showActionMenu = (course) => {
  selectedCourse.value = course;
  actionMenuVisible.value = true;
};

// 处理操作选择
const handleActionSelect = (e) => {
  const action = e.value;
  if (action === 'edit') {
    C.handleEditCourse(selectedCourse.value);
  } else if (action === 'testbank') {
    goToTestBank(selectedCourse.value.courseId);
  }else if (action === 'assignment') {
    goToAssignment(selectedCourse.value.courseId);
  } else if (action === 'discuss') {
    goToDiscuss(selectedCourse.value.courseId);
  } else if (action === 'schedule') {
    goToSchedule(selectedCourse.value.courseId);
  } else if (action === 'delete') {
    C.handleDeleteCourse(selectedCourse.value);
  }
  actionMenuVisible.value = false;
};
</script>

<style scoped>
.course-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.content {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.course-list {
  margin-top: 15px;
}

.course-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.course-item:last-child {
  border-bottom: none;
}

.course-logo-container {
  margin-right: 15px;
  flex-shrink: 0;
}

.logo-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.course-logo {
  width: 100%;
  height: 100%;
  display: block;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  border: 1px dashed #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.course-info {
  flex: 1;
  min-width: 0; /* 防止文本溢出 */
}

.course-name {
  font-size: 16px;
  font-weight: 500;
}

.course-desc {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-creator {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.actions {
  display: flex;
  gap: 5px;
}

.more-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>